import './App.css';
import { BrowserRouter as Router } from 'react-router';
import { Routes } from 'react-router';
import { Route } from 'react-router';
import { Link, NavLink } from 'react-router';
import { FaArrowLeft } from 'react-icons/fa';
import { Outlet } from 'react-router';
import { useParams } from 'react-router';

// Layout component
const Layout = () => (
  <div>
    <nav>
      <ul>
        <li><NavLink to="/" className={({ isActive }) => isActive ? 'current-link' : ''}>Home</NavLink></li>
        <li><NavLink to="/about" className={({ isActive }) => isActive ? 'current-link' : ''}>About</NavLink></li>
        <li><NavLink to="/users" className={({ isActive }) => isActive ? 'current-link' : ''}>Users</NavLink></li>
        <li><NavLink to="/posts" className={({ isActive }) => isActive ? 'current-link' : ''}>Posts</NavLink></li>
        <li><NavLink to="/admin" className={({ isActive }) => isActive ? 'current-link' : ''}>Admin</NavLink></li>
      </ul>
    </nav>
    <Outlet />
  </div>
);

// Home component
const Home = () => <h1>Home</h1>;

// About component
const About = () => <h1>About</h1>;

// Users component
const Users = () => (
  <div>
    <h1>Users</h1>
    <ul>
      <li><Link to="1">User 1</Link></li>
      <li><Link to="2">User 2</Link></li>
    </ul>
    <Outlet />
  </div>
);

// UserDetail component (Dynamic Segment)
const UserDetail = () => {
  const { userId } = useParams();
  return <h2>User ID: {userId}</h2>;
};

// Posts component (Optional Segment)
const Posts = () => (
  <div>
    <h1>Posts</h1>
    <ul>
      <li><Link to="2023">2023 Posts</Link></li>
      <li><Link to="2024">2024 Posts</Link></li>
    </ul>
    <Outlet />
  </div>
);

// PostYear component (Optional Segment)
const PostYear = () => {
  const { year } = useParams();
  return <h2>Posts from {year || 'all years'}</h2>;
};

// AdminLayout component (Route Prefix)
const AdminLayout = () => (
  <div>
    <h1>Admin Panel</h1>
    <nav>
      <ul>
        <li><Link to="/" ><FaArrowLeft /></Link></li>
        <li><NavLink to="" end className={({ isActive }) => isActive ? 'current-link' : ''}>Dashboard</NavLink></li>
        <li><NavLink to="settings" className={({ isActive }) => isActive ? 'current-link' : ''}>Settings</NavLink></li>
      </ul>
    </nav>
    <Outlet />
  </div>
);

// AdminDashboard component
const AdminDashboard = () => (
  <div>
    <h2>Admin Dashboard</h2>
  </div>
);

// AdminSettings component
const AdminSettings = () => <h2>Admin Settings</h2>;

// Splat component
const Splat = () => {
  const { splat } = useParams();
  return <h2>Caught by Splat: {splat}</h2>;
};

// App component with nested routes
const App = () => (
  <Router>
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="users" element={<Users />}>
          <Route path=":userId" element={<UserDetail />} />
        </Route>
        <Route path="posts" element={<Posts />}>
          <Route path=":year?" element={<PostYear />} />
        </Route>
        <Route path="admin" element={<AdminLayout />}>
          <Route index element={<AdminDashboard />} />
          <Route path="dashboard" element={<AdminDashboard />} />
          <Route path="settings" element={<AdminSettings />} />
        </Route>
        <Route path="*" element={<Splat />} />
      </Route>
    </Routes>
  </Router>
);

export default App;
